<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="books"></ul>
    
    <script>
        let xmlhttp = new XMLHttpRequest(); // 微软的api
        xmlhttp.open('GET','http://localhost:1314/book',true);
        // 发送请求
        console.log(xmlhttp,'-----');
        xmlhttp.send();
        console.log(xmlhttp,'8888');
        // 监听对象的状态的改变
        xmlhttp.onreadystatechange = function(){
            // console.log(xmlhttp.readyState); 2、3、4
            if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                console.log(JSON.parse(xmlhttp.responseText));
                document.querySelector('#books')
                    innerHTML = books.map( book => {
                        `<li>
                            id:book.id
                            name:book.name
                        </li>`
                    }).join();
            }
        }

        let books = document.querySelector('#books');

    </script>
</body>
</html>